<template>
  <div class="help">
    <!-- <x-header :left-options="{backText: ''}">帮助中心</x-header> -->
    <top :text="'帮助中心'"></top>
    <div class="mT10" style="margin-top:50px">
      <div class="helpDetail fr">
        <div @click="toggleStatus(1)">
          <img src="../../assets/helpIcon.png" alt="" width="20" class="middle mt15">
          <span class="c3 mT10 fa mgL8">邀请奖励</span>
          <img src="../../assets/helpLower.png" alt="" class="c9 fa fr15 middle t20" width="15" :class="{helpLower:status1}" style="transition: all 0.5s;">
        </div>
        <div class="twoToken" v-if="status1">
          <div>
            问：所邀请人有什么限制吗？
          </div>
          <div class="mgb15 mgT5">
            答：只要是未注册马六甲比特币基金平台的用户都可以;
          </div>
          <div>
            问：如何得知所邀好友（尤其是2至13级好友）是否投资，查看邀请奖励？
          </div>
          <div class="mgb15 mgT5">
            答：可以在用户中心以及好友推荐中随时进行查看；
          </div>
          <div>
            问：好友推荐有数量限制吗？
          </div>
          <div class="mgb15 mgT5">
            答：推荐的好友数量是没有限制的，每级好友可以尽情推荐，邀请的奖励最高至13级好友；
          </div>
          <div>
            问：好友投资一次之后，后面的投资还会有奖励吗？
          </div>
          <div class="mgb15 mgT5">
            答：被邀请人6个月内的复投还可享受奖励，复投按照首投奖励的50%进行发放，复投奖励仅限一次;
          </div>

          <div>
            问：邀请奖励如何提现？
          </div>
          <div class="mgb15 mgT5">
            答：奖励会直接发放至账户余额，满50元即可提现;
          </div>
        </div>
      </div>
      <div class="helpDetail fr">
        <div @click="toggleStatus(2)">
          <img src="../../assets/helpIcon.png" alt="" width="20" class="middle mt15">
          <span class="c3  mT10 fa mgL8">BTC贷款套利</span>
          <img src="../../assets/helpLower.png" alt="" class="c9 fa fr15 middle t20" width="15" :class="{helpLower:status2}" style="transition: all 0.5s;">
        </div>
        <div class="twoToken" v-if="status2">
          <div>
            问： 什么是比特币贷款套利理财计划？
          </div>
          <div class="mgb15 mgT5">
            答：比特币贷款套利理财计划是马六甲基金原创首推的全球优质数字币质押贷款+比特币套利；
          </div>
          <div>
            问：理财计划总资产如何计算？
          </div>
          <div class="mgb15 mgT5">
            答：总资产 =本金+（本金 X年化利率 ／ 365 X 投资天数）；
          </div>
          <div>
            问：怎样保障比特币贷款套利理财收益安全？
          </div>
          <div class="mgb15 mgT5">
            答：每笔数字币质押贷款都有安全的平仓线，一旦币价下跌或者借款人逾期，系统将立即在全球各大交易所自动抛出数字币，确保收益；同时用户质押在平台的数字币能通过成熟的比特币套利机器人从事跨交易所跨币种的快速高频交易，从中获取数字币差价的收益;
          </div>
          <div>
              问： 理财到期后怎么提现？ 
          </div>
          <div class="mgb15 mgT5">
              答：到期后，本金及收益会自动到我的钱包，用户可直接申请提现或按照当日价格折算成等值BTC或ETH提出数字资产;
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { XHeader } from 'vux'
  import Top from '../../components/common/top.vue'
  export default {
    data() {
      return {
        status1: false,
        status2: false,
        status3: false,
        status4: false,
        status5: false,
      }
    },
    methods: {
      toggleStatus(status) {
        if (status == 1) {
          this.status1 = !this.status1;
          this.status2 = false;
          this.status3 = false;
          this.status4 = false;
          this.status5 = false;
        }
        if (status == 2) {
          this.status2 = !this.status2;
          this.status1 = false;
          this.status3 = false;
          this.status4 = false;
          this.status5 = false;
        }
        if (status == 3) {
          this.status3 = !this.status3;
          this.status2 = false;
          this.status1 = false;
          this.status4 = false;
          this.status5 = false;
        }
        if (status == 4) {
          this.status4 = !this.status4;
          this.status2 = false;
          this.status3 = false;
          this.status1 = false;
          this.status5 = false;
        }
        if (status == 5) {
          this.status5 = !this.status5;
          this.status2 = false;
          this.status3 = false;
          this.status4 = false;
          this.status1 = false;
        }
      }
    },
    components: {
      XHeader,
      Top,
    }
  }
</script>
<style lang="less" scoped>
  body {
    background: #f6f6f6;
  }

  .help .c9 {
    color: #999;
  }

  .help .fa {
    position: absolute;
  }

  .help .fr {
    position: relative;
  }

  .help .fr15 {
    right: 15px;
  }

  .help .t20 {
    top: 20px;
  }

  .help .mT10 {
    margin-top: 10px;
  }

  .help .middle {
    vertical-align: middle;
  }

  .help .mt15 {
    margin-top: 15px;
  }

  .help .mgL8 {
    margin-left: 8px;
  }

  .help .mgb15 {
    margin-bottom: 15px;
  }

  .help .mgT5 {
    margin-top: 5px;
  }

  .help .copyBtn {
    color: #fff;
    background: linear-gradient(left, #fedd32, #fe9f0a);
    display: inline-block;
    width: 50px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    top: 12px;
  }

  .help .helpLower {
    transition: all 0.5s;
    transform: rotate(180deg);
  }

  .help .bankMoney {
    border: none;
    outline: none;
    text-align: right;
    display: inline-block;
    height: 45px;
    width: 70%;
    font-size: 15px;
  }

  .help .vux-header {
    background: #fff;
  }

  .help .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .help .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .help .helpDetail {
    border: 1px solid #f6f6f6;
    min-height: 45px;
    /* line-height: 45px; */
    background: #fff;
    padding-left: 15px;
    position: relative;
  }

  .help .helpDetail .twoToken {
    border-top: 1px solid #f6f6f6;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    margin-left: -15px;
    padding-left: 15px;
    padding-top: 10px;
  }
</style>